<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input v-model="searchForm.username" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div></div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="orderNo" label="订单编号" width="200" align="center" />
      <el-table-column prop="licensePlate" label="车牌号" width="120" align="center" />
      <el-table-column label="车牌类型" width="80" align="center">
        <template #default="{ row }">
          <el-button size="small" :type="row.licensePlateType === 1 ? 'primary' : 'warning'">{{
            row.licensePlateType === 1 ? "蓝牌" : "黄牌"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="consumerName" label="姓名" width="180" align="center" />
      <el-table-column prop="phone" label="联系方式" width="140" align="center" />
      <el-table-column prop="pickUpPoint" label="出发地" width="180" align="center" />
      <el-table-column prop="dropOffPlace" label="目的地" width="180" align="center" />
      <el-table-column prop="arriveTime" label="预约日期" width="180" align="center" />
      <el-table-column prop="insuranceExpireTime" label="保险到期日期" width="180" align="center">
        <template #default="{ row }">
          {{ dayjs(row.insuranceExpireTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleDetail(row)">详情</el-button>
          <el-button type="danger" @click="handleReserveOrder(row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- 详情 -->
    <form-drawer ref="formDrawerDetailRef" title="订单详情" :isButton="false">
      <el-descriptions :column="1" border>
        <template v-for="item in descriptionList" :key="item.value">
          <el-descriptions-item v-if="item.type === 'text'" :label="item.label" align="center">{{
            curOrder[item.value as any]
          }}</el-descriptions-item>
          <el-descriptions-item
            v-else-if="item.type === 'button'"
            :label="item.label"
            align="center"
            label-class-name="my-label"
          >
            <el-button
              size="small"
              :type="curOrder.licensePlateType === 1 ? 'primary' : 'warning'"
              >{{ curOrder.licensePlateType === 1 ? "蓝牌" : "黄牌" }}</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item
            v-else-if="item.type === 'location'"
            :label="item.label"
            align="center"
            label-class-name="my-label"
          >
            <div>{{ curOrder[item.value[0]] }}</div>
            <div>{{ curOrder[item.value[1]] }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            v-else-if="item.type === 'suffix'"
            :label="item.label"
            align="center"
          >
            <div>
              {{ curOrder[item.value as any]
              }}<span v-if="curOrder[item.value as any]">{{ item.unit }}</span>
            </div>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </form-drawer>
    <form-drawer ref="formDrawerHandleRef" title="处理订单" @submit="handleReserveOrderSubmit">
      <el-form ref="formHandleRef" :model="formHandle" :rules="rulesHandle" label-width="120px">
        <el-form-item label="是否拒接" prop="isReject">
          <el-radio-group v-model="formHandle.isReject">
            <el-radio-button :value="0">否</el-radio-button>
            <el-radio-button :value="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formHandle.isReject === 0" label="距离" prop="distance">
          <el-input
            v-model="formHandle.distance"
            v-number
            placeholder="请输入距离"
            type="number"
            :min="1"
            ><template #append>KM</template></el-input
          >
        </el-form-item>
        <el-form-item v-if="formHandle.isReject === 1" label="拒接原因" prop="reason">
          <el-input
            v-model="formHandle.reason"
            placeholder="请输入拒接原因"
            type="textarea"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { getReserveOrderListApi, editReserveOrderDistanceApi } from "@/api/didi";

// 路由
const route = useRoute();
const { searchForm, tableData, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {},
    getTableList: getReserveOrderListApi
  });

const { formDrawerRef: formDrawerDetailRef, handleCreate: handleDetailCreate } = useInitForm({});
const curOrder: any = ref();
// 详情
const handleDetail = (val: any) => {
  curOrder.value = val;
  handleDetailCreate();
};
const descriptionList = ref([
  {
    type: "text",
    label: "订单编号",
    value: "orderNo"
  },
  {
    type: "text",
    label: "车牌号",
    value: "licensePlate"
  },
  {
    type: "button",
    label: "车牌类型",
    value: "licensePlateType"
  },
  {
    type: "text",
    label: "车辆类型",
    value: "vehicleModel"
  },
  {
    type: "text",
    label: "姓名",
    value: "consumerName"
  },
  {
    type: "text",
    label: "联系方式",
    value: "phone"
  },
  {
    type: "text",
    label: "预约日期",
    value: "arriveTime"
  },
  {
    type: "text",
    label: "出发地",
    value: "pickUpPoint"
  },
  {
    type: "location",
    label: "出发地经纬度",
    value: ["pickUpLongitude", "pickUpLatitude"]
  },
  {
    type: "text",
    label: "目的地",
    value: "dropOffPlace"
  },
  {
    type: "location",
    label: "目的地经纬度",
    value: ["dropOffLongitude", "dropOffLatitude"]
  },
  {
    type: "text",
    label: "保险到期日期",
    value: "insuranceExpireTime"
  },
  {
    type: "suffix",
    label: "距离",
    value: "distance",
    unit: "KM"
  },
  {
    type: "suffix",
    label: "打车费用",
    value: "didiAmount",
    unit: "元"
  },
  {
    type: "text",
    label: "备注",
    value: "remark"
  }
]);
const {
  formDrawerRef: formDrawerHandleRef,
  formRef: formHandleRef,
  form: formHandle,
  rules: rulesHandle,
  handleEdit: handleReserveOrderEdit,
  handleSubmit: handleReserveOrderSubmit
} = useInitForm({
  form: {
    isReject: 0,
    distance: "",
    reason: ""
  },
  rules: {
    isReject: [{ required: true, message: "请选择是否拒接", trigger: "change" }],
    distance: [{ required: true, message: "请输入距离", trigger: "blur" }],
    reason: [{ required: true, message: "请输入拒接原因", trigger: "blur" }]
  },
  updateData: editReserveOrderDistanceApi
});
// 处理
const handleReserveOrder = (val: any) => {
  curOrder.value = val;
  handleReserveOrderEdit({
    id: val.id,
    reservationId: val.id,
    isReject: 0
  });
};

watch(
  () => route.query.type,
  () => {
    console.log(route.query.type, "---test");
  },
  {
    immediate: true
  }
);
</script>
<style scoped lang="scss">
:deep(.is-bordered-label) {
  width: 120px;
}
</style>
